<template>
    <basic-container>
        <avue-crud :option="option" :table-loading="crudData.loading" :data="crudData.data" :page.sync="crudData.page"
            v-model="crudData.form" ref="crud" :before-open="beforeOpen" :before-close="beforeClose" @row-update="rowUpdate"
            @row-save="rowSave" @row-del="rowDel" @search-change="searchChange" @search-reset="searchReset"
            @current-change="currentChange" @size-change="sizeChange" @on-load="onLoad">
            <template #name9="{ row }">
                <el-switch v-model="row.name9" :active-value="1" @change="(res: any) => changeName9(res, row)"
                    style="--el-switch-on-color: #4E9876; " :inactive-value="0" />
            </template>
            <template #name10="{ row }">
                <el-switch v-model="row.name10" :active-value="1" style="--el-switch-on-color: #4E9876; "
                    :inactive-value="0" />
            </template>
            <template #name11="{ row }">
                <div class="order">
                    <el-popover :visible="row.visible" placement="right" :width="200" trigger="click">
                        <template #reference>
                            <a style="color: #4e9876; border-bottom: dashed 1px #4e9876;" href="javascript:void(0);"
                                @click="row.visible = true"> {{
                                    row.name11
                                }}</a>
                        </template>
                        <div class="hover_box">
                            <el-input v-model="row.name11" placeholder=""></el-input>
                            <div style="margin-top: 10px; display: flex;justify-content: flex-end;">
                                <el-button type="" class="btn" @click="row.visible = false">取消</el-button>
                                <el-button color="#4E9876" @click="orderSubmit(row)">提交</el-button>
                            </div>
                        </div>
                    </el-popover>

                </div>
            </template>
            <!-- 上传文件类型 -->
            <template #name3-type="{ file }">
                <span>{{ file.name }}</span>
            </template>
            <template #name2-type="{ file }">
                <span>{{ file.name }}</span>
            </template>
            <template #menu-form="{ size }">
                <div class="btns_box">
                    <el-button icon="el-icon-user" type="primary" @click="handleSubmit">提 交</el-button>
                    <el-button icon="el-icon-delete" @click="handleEmpty">清 空</el-button>
                    <el-checkbox v-model="crudData.form.edit" label="继续编辑" size="large" />
                    <el-checkbox v-model="crudData.form.view" label="查看" size="large" />
                </div>
            </template>
        </avue-crud>
    </basic-container>
</template>
<script setup lang="ts" name="taskDetail">
import { reactive, ref } from 'vue';
// import {submit,remove} from "@/api/config/api.js";
import { ElMessage } from "element-plus";

const crud = ref('')
let option: any = reactive({
    saveBtn:false,
    cancelBtn:false,
    emptyBtn: false,
    submitBtn: false,
    height: 'auto',
    // calcHeight: 100,
    searchShow: true,
    searchMenuSpan: 6,
    tip: false,
    border: true,
    index: false,
    viewBtn: false,
    editBtn: true,
    delBtn: true,
    addBtn: false,
    dialogWidth: '60%',
    menuFixed: 'right',
    labelWidth: 130,
    menu: true,
    selection: true,
    searchLabelWidth: 110,
    indexLabel: '序号',
    saveBtnText: '确定',
    refreshBtn: true, // 刷新按钮
    columnBtn: false,
    searchShowBtn: false,
    dialogMenuPosition: 'center',
    indexWidth: 60,
    column: [
        {
            label: "ID",
            prop: "ID",
            hide: true,
            span: 24,
        },
        {
            label: "名称",
            prop: "name",
            span: 24,
        },
        {
            label: "图标",
            prop: "name2",
            type: 'upload',
            dragFile: true,
            limit: 1,
            propsHttp: {
                res: 'data'
            },
            action: 'https://api.avuejs.com/imgupload',
            span: 24,
        },
        {
            label: "背景图标",
            prop: "name3",
            type: 'upload',
            dragFile: true,
            limit: 1,
            propsHttp: {
                res: 'data'
            },
            action: 'https://api.avuejs.com/imgupload',
            span: 24,
        },
        {
            label: "开通价格",
            prop: "name4",
            prefixIcon: 'el-icon-plus',
            span: 24,
        },
        {
            label: "每日任务数",
            prop: "name5",
            type: 'number',
            controlsPosition: 'top',
            span: 13,
        },
        {
            label: "每单收益",
            prop: "name6",
            span: 24,
            prefixIcon: 'el-icon-plus',
        },
        {
            label: "每日可提现次数",
            prop: "name7",
            type: 'number',
            controlsPosition: 'top', // 按钮位置-左右
            span: 13,
            row: true,// 栅格后面的内容是否从新的一行开始展示
        },
        {
            label: "Vip有效期(天)",
            prop: "name8",
            type: 'number',
            controlsPosition: 'top',
            span: 13,
            row: true,// 栅格后面的内容是否从新的一行开始展示

        },
        {
            label: "补差价升级",
            prop: "name9",
            type: 'switch',
            dicData: [{
                label: '',
                value: 0
            }, {
                label: '',
                value: 1
            }],
            span: 24,
        },
        {
            label: "展示",
            prop: "name10",
            dicData: [{
                label: '',
                value: 0
            }, {
                label: '',
                value: 1
            }],
            span: 24,
        },
        {
            label: "排序",
            prop: "name11",
            type: 'number',
            controlsPosition: 'top', // 按钮位置-左右
            span: 24,
        },
        {
            label: "创建时间",
            prop: "name12",
            type: 'datetime',
            span: 24,
        },
        {
            label: "更新时间",
            prop: "name13",
            sortable: true,
            type: 'datetime',
            span: 24,
        },
    ]
})
let crudData: any = reactive({
    query: {},
    visible: false,
    loadingSubmit: false,
    loadingSave: false,
    index_unit: [],
    loading: true,
    active: 1,
    value1: '1',
    page: {
        pageSize: 10,
        currentPage: 1,
        total: 1
    },
    filedArr: [],
    data: []
})
const handleSubmit = () => {
    crud.value.validate((valid: any, done: () => void, msg: any) => {
        if (valid) {
            ElMessage.success('操作成功');
            setTimeout(() => {
                done()
            }, 2000)
        }
    })
}
const handleEmpty = () => {
    crud.value.resetForm();
}
// 序号按钮提交
const orderSubmit = (row: { visible: boolean; }) => {
    row.visible = false
    console.log('row====', row);
}
// 翻页
function currentChange(currentPage: any) {
    crudData.page.currentPage = currentPage;
}
// 每页条数
function sizeChange(pageSize: any) {
    crudData.page.pageSize = pageSize;
}

// 重置
function searchReset() {
    // crudData.query = {};
    // onLoad(crudData.page);
}
// 列表模糊搜索
function searchChange(params: {} | undefined, done: () => void) {
    //   crudData.query = params;
    //   crudData.page.currentPage = 1;
    //   onLoad(crudData.page, params);
    //   done();
}

// 删除
const rowSave = async (row: any, done: any, loading: any) => {
    // await remove(row).then(async () => {
    //     done();
    //     onLoad(crudData.page); 
    //     ElMessage.success('操作成功');
    // }).catch((error: any) => {
    //     done();
    // })
    done()
}
// 编辑 -对接口时解开注释
const rowUpdate = async (row: any, index: Number, done: any, loading: any) => {
    // row 带出的这一行的数据
    // await submit(row).then(async () => {
    //     done();
    //     onLoad(crudData.page); 
    //     ElMessage.success('操作成功');
    // }).catch((error: any) => {
    //     done();
    // })

    // loading() 不关闭弹窗可以再次提交
}

// 弹窗打开前
function beforeOpen(done: any, type: any) {
    // type :类型 add -添加 edit -编辑 view -查看
    if (["add"].includes(type)) {

    }
    if (type === 'view') {
    } else {
    }
    done() //  关闭弹窗
}

// 弹窗关闭前
const beforeClose = (done: () => void, type: any) => {

    done() //  关闭弹窗
}
const changeName9 = (res: any, row: any) => {
    console.log('row', row);
    console.log('res', res);
}
const onLoad = () => {
    crudData.loading = false;
    crudData.data = [
        {
            ID: '124',
            name: 'VIP1',
            name2: 'https://jumptra.vip/uploads/images/89feef87a9eaeaf77e7828d76bd925da.png',
            name3: 'https://jumptra.vip/uploads/images/89feef87a9eaeaf77e7828d76bd925da.png',
            name4: '100',
            name5: '10',
            name6: '2.00',
            name7: '10',
            name8: '365',
            name9: 1,
            name10: 1,
            name11: '1',
            name12: '2022-12-14 01:53:25',
            name13: '2024-07-05 08:35:30',
        },
        {
            ID: '125',
            name: 'VIP2',
            name2: 'https://jumptra.vip/uploads/images/89feef87a9eaeaf77e7828d76bd925da.png',
            name3: 'https://jumptra.vip/uploads/images/89feef87a9eaeaf77e7828d76bd925da.png',
            name4: '500',
            name5: '10',
            name6: '2.00',
            name7: '10',
            name8: '365',
            name9: 1,
            name10: 1,
            name11: '2',
            name12: '2022-12-14 01:53:25',
            name13: '2024-07-06 08:35:30',
        }
    ]
    crudData.page.total = crudData.data.length;

    // getList().then((res: any) => {
    //     console.log('getReviewLog--', res);
    //     const Data = res.data.data;
    //      crudData.page.total = Data.total;
    //     crudData.logData = Data;
    //     crudData.loading = false;
    // });
}
</script>
<style scoped lang="scss">
::v-deep span.avue-crud__img {
    width: 50px;
    height: 30px;

    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

::v-deep .el-popper {

    .hover_box {

        .btn_box {
            display: flex;
            justify-content: flex-end;
            margin-top: 10px;

            .btn {
                margin-right: 10px;
            }
        }
    }
}
</style>